<template>
<div>
    <transition :name="transitionName">
        <router-view></router-view>
    </transition>
    <div class="zhezhao" v-show="zhezhaoShow" :style="zhezhaoStyle"></div>
    <!-- zhezhao2纯粹是为了解决初始化z-index造成的闪屏问题 -->
    <div class="zhezhao2" v-show="zhezhaoShow2" :style="zhezhaoStyle2"></div>
    <div class="Exit" v-show="exit" :style="exitLater?'box-shadow: 0px 0px 0px 500px rgb(173, 173, 173,.5);opacity:1':''">
        <div>期待再次与您相遇</div>
        <div style="margin-top: 30px;position: absolute;font-size: 12px;color: rgb(37, 99, 255);">⭐请再次返回退出</div>
        <div class="div1" @click="cancelBtn">取消</div>
    </div>
</div>
</template>

<script>
export default {
    name:'routerTransition',
    data(){
        return{
            transitionName:'',
            zhezhaoShow:0,
            zhezhaoStyle:'',
            zhezhaoShow2:0,
            zhezhaoStyle2:'',
            exit:0,
            exitLater:0,
            BeforeExit:0,
        }
    },
    methods:{
        cancelBtn(){this.exit=0},
    },
    watch:{
        $route(to,from){
            this.exit=0
            this.transitionName=''
            console.log('to=>',to.name);
            console.log('from=>',from.name);
            // 把persion替换成intercept_backspace
            if(from.name=='intercept_backspace'&&(to.name=='checkpsw'||to.name=='infoshow'||to.name=='addressShow')){
                this.zhezhaoStyle='background-color: rgba(185, 185, 185, 0.5);z-index: 4;'
                this.zhezhaoShow=1
                this.transitionName='into'
                setTimeout(() => {
                this.zhezhaoStyle='background-color: rgb(185, 185, 185, 0);'
                }, 20);
                setTimeout(() => {
                    this.zhezhaoShow=0
                }, 300);
            }
            if(from.name=='forgetpsw'&&to.name=='infoshow'){
                this.zhezhaoStyle2='background-color: rgba(185, 185, 185, 0.5);z-index: 6;'
                this.zhezhaoShow2=1
                this.transitionName='into'
                setTimeout(() => {
                this.zhezhaoStyle2='background-color: rgb(185, 185, 185, 0);'
                }, 20);
                setTimeout(() => {
                    this.zhezhaoShow2=0
                }, 300);
            }
            if(to.name=='intercept_backspace'&&(from.name=='checkpsw'||from.name=='infoshow'||from.name=='addressShow'||from.name=='forgetpsw'||from.name=='changepsw'||from.name=='sendCode')){
                this.zhezhaoStyle='background-color: rgba(185, 185, 185, 0.5);z-index: 4;'
                this.zhezhaoShow=1
                this.transitionName='quit'
                setTimeout(() => {
                this.zhezhaoStyle='background-color: rgb(185, 185, 185, 0);'
                }, 20);
                setTimeout(() => {
                    this.zhezhaoShow=0
                    this.zhezhaoStyle='background-color: rgb(185, 185, 185, 0);z-index:-1'
                }, 300);
            }
            if(to.name=='forgetpsw'&&from.name=='infoshow'){
                this.zhezhaoStyle2='background-color: rgba(185, 185, 185, 0.5);z-index: 6;'
                this.zhezhaoShow2=1
                this.transitionName='quit'
                setTimeout(() => {
                this.zhezhaoStyle2='background-color: rgb(185, 185, 185, 0);'
                }, 20);
                setTimeout(() => {
                    this.zhezhaoShow2=0
                }, 300);
            }
            if(from.name=='checkpsw'&&to.name=='forgetpsw'||from.name=='forgetpsw'&&to.name=='sendCode'||from.name=='sendCode'&&to.name=='changepsw'||from.name=='checkpsw'&&to.name=='changepsw'){
                this.transitionName='next'
            }
            if(to.name=='checkpsw'&&from.name=='forgetpsw'||to.name=='forgetpsw'&&from.name=='sendCode'||to.name=='forgetpsw'&&from.name=='changepsw'||to.name=='checkpsw'&&from.name=='changepsw'){
                this.transitionName='back'
            }
            if(from.name=='infoshow'&&(to.name=='checkphone'||to.name=='chooseSex'||to.name=='checkemail')||from.name=='checkemail'&&to.name=='newemail'||(from.name=='newemail'||from.name=='newphone')&&to.name=='checkCode'||from.name=='checkphone'&&to.name=='newphone'){
                this.transitionName='next'
            }
            if(to.name=='infoshow'&&(from.name=='checkphone'||from.name=='chooseSex'||from.name=='checkemail')||to.name=='checkemail'&&(from.name=='newemail'||from.name=='checkCode')||to.name=='checkphone'&&(from.name=='newphone'||from.name=='checkCode')){
                this.transitionName='back'
            }
            if(from.name=='addressShow'&&to.name=='editAddress'){
                this.transitionName='next'
            }
            if(to.name=='addressShow'&&from.name=='editAddress'){
                this.transitionName='back'
            }
            if(to.name == 'persion' && (from.name!='intercept_backspace' || from.name== undefined ||from.name== '')){
                this.$router.push({name:'intercept_backspace'})
            }
            if(to.name =='persion' && from.name =='intercept_backspace'){
                this.exit=1
            }
        },
        exit(value){
            this.exitLater=0
            if(value){
                setTimeout(() => {
                    this.exitLater=1
                }, 20);
            }
        }
    },
}
</script>

<style scoped>
.div1{
    bottom: 0;
    right: 0;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 12px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 10px;
    font-size: 14px;
    position: absolute;
    background: linear-gradient(to bottom right,rgba(185, 185, 185, 0.5),white);
    box-shadow: 0px 0px 50px 10px rgb(255, 198, 76);
}
.Exit{
    border-radius: 12px;
    background-color: rgb(255, 255, 255);
    text-align: center;
    z-index: 5;
    position: fixed;
    top: 35%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    padding-top: 20px;
    padding-bottom: 60px;
    box-shadow: -100px 350px 0px 10px rgb(173, 173, 173,.5);
    opacity:0;
    transition: box-shadow 1s ease-out ,opacity .3s ease-in;
}
.zhezhao2{
  background-color: rgba(185, 185, 185, 0.5);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 6;
  transition: background-color .3s ease-in-out;
}
.zhezhao{
  background-color: rgba(185, 185, 185, 0.5);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 4;
  transition: background-color .3s ease-in-out;
}
.into-enter-active, .into-leave-active,.quit-enter-active, .quit-leave-active,.next-enter-active, .next-leave-active,.back-enter-active, .back-leave-active{
  transition: all .3s ease-in-out;
}

.into-enter{
  transform: translateX(-100%);
}
.into-leave-to{
  transform: scale(.85,.85);
}

.quit-enter{
    transform: scale(.85,.85);
}
.quit-leave-to{
    transform: translateX(-100%);
}

.next-enter{
  transform: translateX(100%);
}
.next-leave-to{
  transform: translateX(-15%);
}

.back-enter{
  transform: translateX(-100%);
}
.back-leave-to{
  transform: translateX(15%);
}
</style>